<template>
  <div class="trends">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="z-999 ml-32rpx flex items-center pb-40rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <text class="text-36rpx font-600">返回</text>
        </div>
      </div>
    </div>
    <div class="p-32rpx">
      <s-waterfall v-if="trendList.length>0" :datalist="trendList" :column="2">
        <template #default="{ item }">
          <div class="mb-24rpx box-border rounded-32rpx pr-32rpx" @click="navTo(`/pages-square/articledetail?articleId=${item.id}`)">
            <div class="bg-water relative mb-24rpx w-326rpx flex items-center justify-center rounded-32rpx bg-hex-FAF9F8">
              <image
                class="w-100% rounded-24rpx"
                lazy-load
                :src="item.coverImage"
                mode="widthFix" />
            </div>
            <text class="multiLine-hiddle mx-10rpx mt-10rpx inline-block font-600">{{ item.title }}</text>
            <div class="mb-22rpx mr-15rpx box-border flex items-center justify-between">
              <div class="flex items-center">
                <image
                  class="mr-15rpx h-44rpx w-44rpx rounded-50%"
                  :src="item.avatarUrl"
                  mode="scaleToFill" />
                <text class="text-24rpx text-hex-7C8699">{{ item.nickname }}</text>
              </div>
              <div class="flex justify-center text-right text-hex-ABAFB5">
                <image :src="`${cdnUrl}/imgs/square/more.png${imgVersion}`" mode="widthFix" class="h-48rpx w-48rpx" />
              </div>
            </div>
          </div>
        </template>
      </s-waterfall>
      <div v-else
           class="mt-200rpx flex items-center justify-center">
        <div>
          <image
            class="h-364rpx w-364rpx"
            :src="`${cdnUrl1}/imgs/xy/other/noneeattention.png${imgVersion}`"
            mode="scaleToFill"
          />
          <div class="text-center text-28rpx text-hex-7C8699">暂无数据</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang='ts' setup>
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let searchBarTop: any = $ref('24')

let userId = $ref()
onLoad((options) => {
  if (options) {
    userId = options.userId
  }
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
let pageNo = $ref(1)
let trendList = $ref([])
let totalPage = $ref()
const getTrendList = async () => {
  const reqData = {
    method: 'get',
    data: {
      pageNo,
      pageSize: 10,
      userId,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/auth/article/articlePageList', reqData)
  totalPage = data?.result?.totalPage
  trendList = trendList.concat(data?.result?.dataList)
}
onMounted(() => {
  getTrendList()
})

//下滑加载更多数据
const getMoreData = () => {
  //判断总页数和当前页数进行加载请求
  if (totalPage !== pageNo) {
    pageNo++
    getTrendList()
  }
}
onReachBottom(() => {
  getMoreData()
})
</script>

<style lang='scss'>
</style>
